본문으로 건너뛰기

6. 색상과 배경

웹 디자인에서 색상과 배경은 시각적 매력을 크게 좌우하는 요소입니다. CSS는 다양한 색상 표현 방법을 제공하며, 배경 이미지나 그라디언트를 활용해 페이지를 더 생동감 있게 만들 수 있습니다. 이 섹션에서는 다양한 색상 표현 방법과 배경 관련 기술을 다룹니다.

6.1 다양한 색상 표현 방법​

CSS에서 색상을 표현하는 방법은 여러 가지가 있습니다.

6.1.1 키워드 색상​

6.1.2 HEX 코드​

  • 키워드 색상: CSS는 기본적으로 제공하는 색상 키워드를 사용할 수 있습니다. 예를 들어, red, blue, green과 같은 키워드를 사용할 수 있습니다.

  • HEX 코드: 16진수(hexadecimal) 코드를 사용하여 색상을 정의할 수 있습니다. 6자리 코드를 사용하거나 짧게 3자리로 표현할 수 있습니다.

  • RGB 및 RGBA: RGB는 각각의 색상 성분을 0~255 사이의 숫자로 표현합니다. RGBA는 여기에 알파 값(불투명도)을 추가하여 투명도를 설정할 수 있습니다.

  • HSL 및 HSLA: HSL은 색상(hue), 채도(saturation), 명도(lightness)를 기준으로 색상을 설정하는 방식입니다. HSLA는 알파 값을 추가해 투명도를 설정할 수 있습니다.

h1 {
  color: red;
}

p {
  color: #ff5733;
}

span {
  color: #f53; /* 짧은 HEX 코드 */
}

div {
  background-color: rgb(255, 87, 51);
}

div.transparent {
  background-color: rgba(255, 87, 51, 0.5); /* 반투명 */
}

h2 {
  color: hsl(30, 100%, 50%);
}

h2.transparent {
  color: hsla(30, 100%, 50%, 0.3); /* 투명도 포함 */
}

6.2 배경 이미지와 그라디언트 활용​

배경 이미지와 그라디언트는 웹 페이지에 깊이감과 스타일을 더할 수 있습니다. 적절한 이미지를 사용하거나 그라디언트를 활용해 자연스러운 색상 변화를 줄 수 있습니다.

6.2.1 배경 이미지 적용​

CSS에서 배경 이미지를 설정하려면 background-image 속성을 사용합니다. 배경 이미지는 고정되거나 반복 설정을 통해 다채롭게 사용할 수 있습니다.

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat; /* 반복하지 않음 */
  background-size: cover; /* 화면 전체에 맞춤 */
  background-position: center; /* 가운데 정렬 */
}

6.2.2 배경 그라디언트 활용​

CSS 그라디언트를 사용하면 배경에 색상 간의 부드러운 변화를 줄 수 있습니다. 선형(linear) 또는 방사형(radial) 그라디언트를 적용할 수 있습니다.

  • 선형 그라디언트 (Linear Gradient): 선형 그라디언트는 두 개 이상의 색상이 일정한 방향으로 변하는 효과를 제공합니다.

  • 방사형 그라디언트 (Radial Gradient): 방사형 그라디언트는 원 모양으로 색상이 변하는 효과를 제공합니다.

  • background-attachment: 배경을 고정할지 스크롤할지 여부를 설정합니다.

  • background-size: 배경 크기를 설정합니다. cover, contain 값을 사용해 배경을 요소에 맞출 수 있습니다.

div {
  background: linear-gradient(
    to right,
    #ff5733,
    #33ff57
  ); /*  선형 그라이디언트 */
}

div {
  background: radial-gradient(
    circle,
    #ff5733,
    #33ff57
  ); /*  방사 그라이디언트 */
  background-position: top right; /* 오른쪽 상단 */
  background-size: contain; /* 배경 이미지를 요소에 맞게 조정 */
}